<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords"
          content="摸鱼低代码,摸鱼低代码平台,MFish,mfish,nocode,lowcode,mfish-nocode,mfish-nocode-view,低代码,开源低代码平台,摸鱼,摸鱼官网,摸鱼低代码官网,摸鱼低代码平台,摸鱼低代码文档,代码生成,java 快速开发平台,java 快速开发框架,spring boot快速开发框架,spring boot快速开发平台,java开发框架,java开源框架,开源快速开发,快速开发平台,开源后台管理系统,微服务,spring boot,springBoot,shiro,mybatis,thymeleaf,bootstrap,vue3">
    <meta name="description"
          content="摸鱼低代码平台希望打造一个基于低代码的无代码平台。既能给程序员使用，也能满足非专业人士的需求。后端基于spring-cloud-alibaba微服务架构，前端基于vite+vue3.0+pnpm">
    <title>摸鱼低代码平台</title>
    <script type="text/javascript" src="static/js/vue.min.js?_v=V2.0.0"></script>
    <script type="text/javascript" src="static/js/jquery.min.js?_v=V2.0.0"></script>
    <script src="static/js/bootstrap.min.js?_v=V2.0.0"></script>
    <link rel="stylesheet" href="static/css/bootstrap.min.css?_v=V2.0.0">
    <link rel="stylesheet" type="text/css" href="static/css/login.css?_v=V2.0.0">
    <link rel="stylesheet" type="text/css" href="static/css/animation.css?_v=V2.0.0">
    <link rel="icon" href="static/img/favicon.ico">
    <link rel="shortcut icon" href="static/img/favicon.ico">
</head>
<body>
<input type="hidden" th:value="${errorMsg}" id="errorMsg"/>
<input type="hidden" th:value="${loginType}" id="loginType"/>
<input type="hidden" th:value="${username}" id="username"/>
<section class="back-color" id="newLogin">
    <div id="errorShow" data-bs-toggle="modal" data-bs-target="#errorModal">
    </div>
    <div class="modal fade" id="errorModal">
        <div class="modal-dialog">
            <div class="alert alert-danger" role="alert">
                {{errorMsg}}
            </div>
        </div>
    </div>
    <div class="login">
        <div class="logo -enter-x">
            <img class="brand" src="static/img/logo.png" alt="logo">
            <div class="title">
                <h1>摸鱼低代码平台</h1>
                <h6>MFish NoCode</h6>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="card-left" v-if="showLeft">
                </div>
                <div class="card-wrapper enter-x">
                    <div class="card fat">
                        <div class="card-body">
                            <h4 class="card-title mb-3">{{loginTypeName}}登录</h4>
                            <h6 style="color: red">演示环境，请使用最下方git账号一键登录</h6>
                            <div v-show="userPasswordVisible">
                                <form id="login" method="POST" class="enter-x">
                                    <div class="form-floating mb-3">
                                        <input type="text" class="form-control"
                                               :class="{'is-invalid':error.username.show,'is-valid':isValid}"
                                               id="inputUsername" v-model="username" name="username"
                                               placeholder="用户名" @blur="validateUserName" @keydown.enter="login">
                                        <label for="inputUsername">用户名</label>
                                        <div class="invalid-feedback" v-if="error.username.show">
                                            {{error.username.msg}}
                                        </div>
                                    </div>
                                    <div class="input-group mb-3">
                                        <div class="form-floating">
                                            <input :type="passwordType" class="form-control"
                                                   :class="{'is-invalid':error.password.show,'is-valid':isValid}"
                                                   id="inputPassword"
                                                   v-model="password" name="password" placeholder="密码"
                                                   @blur="validatePassword" @keydown.enter="login">
                                            <label for="inputPassword">密码</label>
                                            <div class="invalid-feedback" v-if="error.password.show">
                                                {{error.password.msg}}
                                            </div>
                                        </div>
                                        <span class="btn send-msg" @mouseover="msgOver" @mouseleave="msgLeave"
                                              @click="pwdShowChange">
                                        <svg v-if="passwordShow" xmlns="http://www.w3.org/2000/svg" width="16"
                                             height="16" :fill="sendMsgColor" class="bi bi-eye" viewBox="0 0 16 16">
                                          <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                                          <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                                        </svg>
                                        <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                             :fill="sendMsgColor" class="bi bi-eye-slash" viewBox="0 0 16 16">
                                          <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
                                          <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
                                          <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
                                        </svg>
                                    </span>
                                    </div>
                                    <div class="input-group mb-1" v-if="captchaOnOff">
                                        <div class="form-floating">
                                            <input type="text" class="form-control"
                                                   :class="{'is-invalid':error.captcha.show,'is-valid':isValid}"
                                                   id="inputCaptcha"
                                                   v-model="captchaValue" name="captchaValue" placeholder="验证码"
                                                   @blur="validateCaptcha" @keydown.enter="login">
                                            <input type="hidden" name="captchaKey" v-model="captchaKey">
                                            <label for="inputCaptcha">验证码</label>
                                            <div class="invalid-feedback" v-if="error.captcha.show">
                                                {{error.captcha.msg}}
                                            </div>
                                        </div>
                                        <span><img :src="captchaUrl" @click="getCaptcha" class="captcha" alt="验证码"/></span>
                                    </div>
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" id="rememberMe" type="checkbox"
                                               name="rememberMe"
                                               v-model="rememberMe">
                                        <label class="form-check-label" for="rememberMe">
                                            记住我
                                        </label>
                                        <a style="float: right" href="https://jq.qq.com/?_wv=1027&k=0A2bxoZX"
                                           target="_blank">加入我们</a>
                                    </div>
                                    <div class="d-grid gap-2 mb-3">
                                        <button type="button" class="btn btn-primary btn-block" @click="login">登录
                                        </button>
                                    </div>
                                    <div class="btn-tabs d-flex">
                                        <button type="button" class="btn btn-tab btn-default" @click="showPhoneSmsCode">
                                            手机登录
                                        </button>
                                        <button type="button" class="btn btn-tab btn-default" @click="showQrCode">扫码登录
                                        </button>
                                        <button type="button" class="btn btn-tab btn-default" disabled>用户注册</button>
                                    </div>
                                    <input type="hidden" v-model="loginType" name="loginType"/>
                                </form>
                            </div>
                            <div v-show="phoneSmsCodeVisible">
                                <form id="smsLogin" method="post" class="enter-x">
                                    <div class="form-floating mb-3">
                                        <input type="text" class="form-control"
                                               :class="{'is-invalid':error.phone.show,'is-valid':isValid}"
                                               id="inputPhone" v-model="phone" name="username" placeholder="手机号"
                                               @blur="validatePhone" @keydown.enter="smsLogin">
                                        <label for="inputPhone">手机号</label>
                                        <div class="invalid-feedback" v-if="error.phone.show">
                                            {{error.phone.msg}}
                                        </div>
                                    </div>
                                    <div class="input-group mb-3">
                                        <div class="form-floating"
                                             :class="{'is-invalid':error.code.show,'is-valid':isValid}">
                                            <input type="text" class="form-control"
                                                   :class="{'is-invalid':error.code.show}"
                                                   id="inputCode" v-model="codeValue" name="password"
                                                   placeholder="验证码" @blur="validateCode" @keydown.enter="smsLogin">
                                            <label for="inputCode">验证码</label>
                                            <div class="invalid-feedback" v-if="error.code.show">
                                                {{error.code.msg}}
                                            </div>
                                        </div>
                                        <span class="btn send-msg" @click="sendMsg" :disabled="codeDisabled"
                                              @mouseover="msgOver" @mouseleave="msgLeave">
                                        <span v-if="codeDisabled">{{codeButton}}</span>
                                        <svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                             class="bi bi-envelope" viewBox="0 0 16 16" :fill="sendMsgColor">
                                            <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
                                        </svg>
                                    </span>
                                    </div>
                                    <input type="hidden" v-model="loginType" name="loginType"/>
                                    <div class="d-grid gap-2 mb-3">
                                        <button type="button" class="btn btn-primary btn-block" @click="smsLogin">登录
                                        </button>
                                    </div>
                                    <div class="d-grid gap-2 mb-3">
                                        <button type="button" class="btn btn-tab btn-block" @click="showUserPassword">返回
                                        </button>
                                    </div>
                                </form>
                            </div>
                            <div v-show="qrCodeVisible" class="enter-x">
                                <form id="qrCodeLogin" method="post">
                                    <input type="hidden" v-model="qrCodeName" name="username"/>
                                    <input type="hidden" v-model="qrCodeSecret" name="password"/>
                                    <input type="hidden" v-model="loginType" name="loginType"/>
                                </form>
                                <div class="qrcode-img mb-3">
                                    <div>
                                        <img class="qrcode" id="qrCode" :src="qrCode" alt="二维码"/>
                                        <div class="qrcode-status" v-if="scanStatus===3">
                                            <p>二维码已失效</p>
                                            <button type="button" class="btn btn-primary btn-block"
                                                    @click="refreshQrCode">刷新二维码
                                            </button>
                                        </div>
                                        <div class="qrcode-status" v-if="scanStatus===1">
                                            <img src="static/img/success.png" alt="成功"/>
                                            <p>扫描成功</p>
                                            <p>请在手机上确认登录</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="qrcode-desc mb-3">
                                    <label>{{qrCodeDesc}}</label>
                                </div>
                                <div class="d-grid gap-2 mb-3">
                                    <button type="button" class="btn btn-tab btn-block" @click="showUserPassword">返回
                                    </button>
                                </div>
                            </div>
                            <div class="login-divider">
                                <hr class="divider" style="flex: 1"/>
                                <span style="padding: 0 10px 0 10px">其他方式登录</span>
                                <hr class="divider" style="flex: 1"/>
                            </div>
                            <div class="other-login">
                                <span title="gitee登录" style="font-size: 32px; color: rgb(191, 12, 44); display: inline-flex; cursor: pointer;" @click="giteeLogin">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                         aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24">
                                        <path fill="currentColor" d="M11.984 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12a12 12 0 0 0 12-12A12 12 0 0 0 12 0zm6.09 5.333c.328 0 .593.266.592.593v1.482a.594.594 0 0 1-.593.592H9.777c-.982 0-1.778.796-1.778 1.778v5.63c0 .327.266.592.593.592h5.63c.982 0 1.778-.796 1.778-1.778v-.296a.593.593 0 0 0-.592-.593h-4.15a.59.59 0 0 1-.592-.592v-1.482a.593.593 0 0 1 .593-.592h6.815c.327 0 .593.265.593.592v3.408a4 4 0 0 1-4 4H5.926a.593.593 0 0 1-.593-.593V9.778a4.444 4.444 0 0 1 4.445-4.444h8.296Z"></path>
                                    </svg>
                                </span>
                                <span title="github登录" style="font-size: 32px; color: #000000 ; display: inline-flex; cursor: pointer;" @click="githubLogin">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 24 24">
                                        <path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path>
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            Copyright &copy; 2023 &mdash; MFish NoCode 摸鱼低代码平台
        </div>
    </div>
</section>
<script src="static/js/login.js?_v=V2.0.0"></script>
</body>
</html>
